// fadeIn.js - 渐入效果全局指令

/**
 * 绑定渐入效果到元素
 * @param {HTMLElement} el - 目标元素
 * @param {string} effectType - 效果类型：'fade'(默认), 'left', 'right', 'up', 'down', 'scale'
 */
function bindFadeInEffect(el, effectType = 'fade') {
  // 初始设置
  el.classList.add('fade-element');
  
  // 根据效果类型添加相应的类
  if (effectType === 'left') {
    el.classList.add('fade-from-left');
  } else if (effectType === 'right') {
    el.classList.add('fade-from-right');
  } else if (effectType === 'up') {
    el.classList.add('fade-from-up');
  } else if (effectType === 'down') {
    el.classList.add('fade-from-down');
  } else if (effectType === 'scale') {
    el.classList.add('fade-scale');
  } // 默认为普通fade效果
  
  // 检查浏览器是否支持 Intersection Observer
  if ('IntersectionObserver' in window) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 当元素进入视口时添加可见类
          el.classList.add('fade-in-visible');
          // 一旦动画完成，停止观察
          observer.unobserve(el);
        }
      });
    }, {
      threshold: 0.1, // 当至少10%的元素可见时触发
      rootMargin: '0px 0px -50px 0px' // 提前一点触发
    });
    
    observer.observe(el);
  } else {
    // 如果浏览器不支持，则直接显示元素
    el.classList.add('fade-in-visible');
  }
}

// 定义指令
export default {
  mounted(el, binding) {
    // 获取渐入效果类型，默认为fade
    const effectType = binding.value || 'fade';
    bindFadeInEffect(el, effectType);
  }
} 